<template>
  <div class="post-detail">
    <el-card class="post-detail" v-if="post.author">
      <div class="title-avatar">
        <h1>{{ post.title }}</h1>
        <el-image
          class="avatar"
          :src="post.author.avatar"
          style="width: 48px; height: 48px"
        ></el-image>
      </div>
      <div class="post-info">
        <span>
          作者:
          <x-user-detail-link
            :user-id="post.author.id"
            :link-name="post.author.name"
          />
        </span>
        <span>发布时间: {{ post.publishTime }}</span>
        <span>浏览次数: {{ post.viewCount }}</span>
      </div>
      <el-divider />
      <div class="post-content" v-html="post.content"></div>
    </el-card>
    <div class="comment-editor">
      <el-card v-if="store.getters.loggedUser" class="comment-x">
        <h1>发表回复</h1>
        <x-edit ref="xEditRef"></x-edit>
        <div class="submit">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </el-card>
    </div>
    <el-card
      body-style="width:100%;"
      v-for="comment in comments"
      :comment="comment"
      class="comment"
    >
      <div class="comment" v-if="comment.author">
        <el-avatar shape="square" :src="comment.author.avatar" />
        <div class="replier-right">
          <div class="replier-info">
            <div>
              <x-user-detail-link
                :user-id="comment.author.id"
                :link-name="comment.author.name"
              />
              <span>{{ comment.publishTime }}</span>
            </div>
            <el-space class="space">&nbsp;</el-space>
          </div>
          <div class="reply-content" v-html="comment.content"></div>
        </div>
      </div>
    </el-card>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { getPostDetail, postComment } from "../../api/postAPI";
import Prism from "prismjs";

const route = useRoute();
const { id } = route.query;
const post = ref({});
const comments = ref([]);
const store = useStore();
const xEditRef = ref();

const handleSubmit = () => {
  if ((xEditRef.value.getText() || "").trim() == "") {
    ElMessage.error("请输入帖子内容, 至少打几个字好吧");
  } else {
    postComment(id, xEditRef.value.getHtml()).then((data) => {
      ElMessage.success(data.message);
      window.location.reload();
    });
  }
};

onMounted(() => {
  getPostDetail(id).then((data) => {
    post.value = data.data;
    comments.value = data.data.comment;
    setTimeout(() => {
      Prism.highlightAll();
    }, 500);
  });
});
</script>

<style scoped>
.submit {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
.comment-x {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.post-detail {
  display: flex;
  flex-direction: column;
}
.comment-editor {
  margin-top: 10px;
}
.comment {
  margin-top: 10px;
  display: flex;
  align-items: top;
}
.title-avatar {
  display: flex;
  justify-content: space-between;
}

.post-detail {
  min-width: 800px;
}

.post-info {
  display: flex;
  justify-content: space-between;
}
.comment > div {
  margin-left: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.replier-info {
  display: flex;
  margin-bottom: 10px;
}

.replier-info > div {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.space {
  flex: 2 !important;
}
</style>
